<template>
  <div
    v-if="crud.props.searchToggle"
  >
    <div v-if="back == false ">
      <el-input v-model="query.projectName" clearable size="small" placeholder="请输入项目名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
      <el-input v-model="query.contact" clearable size="small" placeholder="请输入咨询电话" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
      <el-input v-model="query.note" clearable size="small" placeholder="请输入备注关键词" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
      <!--<el-select v-model="query.category" clearable size="small" placeholder="请输入政策分类" style="width: 200px;" class="filter-item" @change="crud.toQuery" >
        <el-option
        v-for="item in policyCategoryList"
        :key="item.label"
        :label="item.label"
        :value="item.label"
      />  
      </el-select>-->
      <rrOperation/>
    </div>
    <div v-else-if="back == true">
      <el-input v-model="query.projectName" clearable size="small" placeholder="请输入项目名称" style="width: 200px;margin-left: 5%;" class="filter-item" @keyup.enter.native="keyupSearch(query.projectName)" />
      <span>
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="clickSearch(query.projectName)">搜索</el-button>
        <el-button v-if="crud.optShow.reset" class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
      </span>
    </div>
    <div v-show="back == true">
      <el-row  :gutter="24">
        <el-col :span="8" v-for="(category, index) in policyCategoryList" :key="category.key" :label="category.label" :value="category.label" >
          <div class="categoryBox" @click="handleClick(category.label)">
            <span>{{ index + 1 }}. {{ category.label }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <el-button class="filter-item" size="mini" type="primary" icon="el-icon-download" @click="exportData"  >导出</el-button> -->

  </div>
</template>

<script>
import { header } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {policyCategoryList} from '@/utils/index'

export default {
  components: { rrOperation },
  mixins: [header()],
  props: {
    permission: {
      type: Object,
      required: true
    },
    back: {
      type: Boolean
    }
  },
  data() {
    return {
      policyCategoryList,
    }
  },
  created() {
  },
  methods: {
  //   exportData() {
  //     downloadTheFile(`/business/excel/exportRecruit`, '招聘信息.xlsx', this.query)
  //   },
    handleClick(label){
      this.$emit('categoryClicked')
      this.crud.query.category = label;
      this.crud.toQuery()
    },
    keyupSearch(project){
      this.$emit('categoryClicked')
      this.crud.query.projectName = project;
      this.crud.toQuery()
    },
    clickSearch(project){
      this.$emit('categoryClicked')
      this.crud.query.projectName = project;
      this.crud.toQuery()
    },
  }
}
</script>
